<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 二手市场</title>
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="user-center-container">
    <!-- 侧边导航栏 -->
    <aside class="sidebar">
        <div class="user-profile">
            <div class="avatar">
                <img src="../images/default-avatar.jpg" alt="用户头像" id="user-avatar">
                <button class="edit-avatar-btn" id="change-avatar-btn">
                    <i class="fas fa-camera"></i>
                </button>
            </div>
            <h2 id="username-display">用户名</h2>
        </div>

        <nav class="user-menu">
            <ul>
                <li class="active"><a href="#basic-info"><i class="fas fa-user"></i> 基本信息</a></li>
                <li><a href="#security"><i class="fas fa-lock"></i> 账号安全</a></li>
                <li><a href="#my-products"><i class="fas fa-box-open"></i> 我的商品</a></li>
                <li><a href="#orders"><i class="fas fa-receipt"></i> 我的订单</a></li>
                <li><a href="#messages"><i class="fas fa-envelope"></i> 消息中心</a></li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="content-area">
        <!-- 基本信息部分 -->
        <section id="basic-info" class="content-section active">
            <h2><i class="fas fa-user"></i> 基本信息</h2>
            <form id="basic-info-form">
                <div class="form-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" name="nickname" required>
                </div>

                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" name="phone">
                </div>

                <div class="form-group">
                    <label for="address">收货地址</label>
                    <textarea id="address" name="address" rows="3"></textarea>
                </div>

                <div class="form-actions">
                    <button type="button" id="cancel-edit-basic" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </section>

        <!-- 账号安全部分 -->
        <section id="security" class="content-section">
            <h2><i class="fas fa-lock"></i> 账号安全</h2>
            <div class="security-item">
                <h3>登录密码</h3>
                <p>********</p>
                <button id="change-password-btn" class="btn btn-small">修改密码</button>
            </div>

            <div class="security-item">
                <h3>账号绑定</h3>
                <div class="bind-account">
                    <span><i class="fab fa-weixin"></i> 微信: 未绑定</span>
                    <button class="btn btn-small">绑定</button>
                </div>
            </div>

            <!-- 修改密码表单 (默认隐藏) -->
            <form id="change-password-form" class="hidden">
                <div class="form-group">
                    <label for="current-password">当前密码</label>
                    <input type="password" id="current-password" required>
                </div>

                <div class="form-group">
                    <label for="new-password">新密码</label>
                    <input type="password" id="new-password" required>
                </div>

                <div class="form-group">
                    <label for="confirm-password">确认新密码</label>
                    <input type="password" id="confirm-password" required>
                </div>

                <div class="form-actions">
                    <button type="button" id="cancel-password-change" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-primary">确认修改</button>
                </div>
            </form>
        </section>

        <!-- 其他部分内容可以根据需要添加 -->
    </main>
</div>

<!-- 头像上传模态框 -->
<div id="avatar-modal" class="modal hidden">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h3>更换头像</h3>
        <div class="avatar-upload">
            <div class="preview-container">
                <img id="avatar-preview" src="../images/default-avatar.jpg" alt="头像预览">
            </div>
            <input type="file" id="avatar-input" accept="image/*">
            <button id="upload-avatar-btn" class="btn btn-primary">上传头像</button>
        </div>
    </div>
</div>

<script src="js/api.js"></script>
<script src="js/user.js"></script>
</body>
</html>